import React from 'react';
import { connect } from 'react-redux';

import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';

import { TeacherFilter } from '../../components/smart/filter';
import ChartGroup from '../../components/smart/ChartGroup';
import ActivityInviteTeacherLineAreaChart from '../../components/dump/charts/ActivityInviteTeacherLineAreaChart';
import ActivityTelephoneLineAreaChart from '../../components/dump/charts/ActivityTelephoneLineAreaChart';
import ActivityInviteCodeLineAreaChart from '../../components/dump/charts/ActivityInviteCodeLineAreaChart';

import omit from 'lodash/object/omit';

import { ENUM_VIEW, DATE_FORMATTER } from '../../../schema/constants';
import { setCondition } from '../../actions/fixup-work/conditionAction';
import moment from 'moment';

import * as ACTIONS from '../../actions/activity-analysis/inviteAction';

const map = {
    // 邀请教师统计
    [ACTIONS.TypeOption.InviteTeacher]: 'optInviteTeacherData',
    // 手机号
    [ACTIONS.TypeOption.Telephhone]: 'optTelephoneData',
    // 邀请码
    [ACTIONS.TypeOption.InviteCode]: 'optInviteCodeData'
};

const url = {
    // 邀请教师统计
    [ACTIONS.TypeOption.InviteTeacher]: ACTIONS.INVITE_TEACHER_DATA_URL,
    // 手机号
    [ACTIONS.TypeOption.Telephhone]: ACTIONS.INVITE_TELEPHONE_DATA_URL,
    // 邀请码
    [ACTIONS.TypeOption.InviteCode]: ACTIONS.INVITE_CODE_DATA_URL
};

function mapStateToProps(state) {
    return {
        inviteStore: state.invite,
        condition: state.chart.condition
    };
};

function getData(condition, userParams) {
    return ACTIONS.getInviteData(url[userParams.currentOptionID], map[userParams.currentOptionID], {
        condition: omit(condition, 'dataOptions'),
        ...userParams
    });
};

class Invite extends React.Component {
    static propTypes = {
        name: React.PropTypes.string,
    };

    state = {
        currentOptionID: ACTIONS.TypeOption.InviteTeacher,
        currentTimeUnit: ENUM_VIEW.DAY
    };

    constructor(props) {
        super(props);
    };

    // 切换类型选项卡
    handleViewChange = (option) => {
        let { dispatch, condition } = this.props;

        this.setState({
            currentOptionID: option,
            currentTimeUnit: ENUM_VIEW.DAY
        }, () => {
            // get data
            dispatch(getData(condition, this.state));
        });
    };

    // 切换时间颗粒度
    handleTimeUnitChange = (option) => {
        let { dispatch, condition } = this.props;

        this.setState({
            currentTimeUnit: option
        }, () => {
            // get data
            dispatch(getData(condition, this.state));
        });
    };

    // 处理日期范围变化
    handleDateRangeChange = (startDate, endDate) => {
        let { dispatch } = this.props;

        let action = setCondition('startDate', moment(startDate).format(DATE_FORMATTER));
        dispatch(action);

        action = setCondition('endDate', moment(endDate).format(DATE_FORMATTER));
        dispatch(action);

        setTimeout(() => {
            // get data
            let { condition } = this.props;
            dispatch(getData(condition, this.state));
        }, 0);
    };

    // 点击高级筛选条件查询按钮
    handleSearch = () => {
        let { dispatch, condition } = this.props;

        // get data
        dispatch(getData(condition, this.state));
    };

    componentWillMount() {
        let { dispatch, condition } = this.props;
        // get data
        dispatch(getData(condition, this.state));
    }

    render() {
        let { inviteStore, condition } = this.props;
        let { startDate, endDate } = condition;
        let { currentOptionID, currentTimeUnit } = this.state;

        let { options, optInviteTeacherData, optTelephoneData, optInviteCodeData } = inviteStore;

        let typeOptions = options.map((item, index) => <Tab key={index} label={item.label} value={item.ID} />);

        return (
            <div className='panel'>
                <TeacherFilter onSearch={this.handleSearch} />
                <ChartGroup
                    onDateRangeChange={this.handleDateRangeChange}
                    startDate={startDate}
                    endDate={endDate}>
                    <Tabs
                        onChange={this.handleViewChange}
                        value={currentOptionID}>
                        {typeOptions}
                    </Tabs>
                    <Tabs
                        onChange={this.handleTimeUnitChange}
                        value={currentTimeUnit}>
                        <Tab label='日' value={ENUM_VIEW.DAY}></Tab>
                        <Tab label='周' value={ENUM_VIEW.WEEK}></Tab>
                        <Tab label='月' value={ENUM_VIEW.MONTH}></Tab>
                    </Tabs>
                    <div className='chart'>
                        {currentOptionID == ACTIONS.TypeOption.InviteTeacher && 
                        <ActivityInviteTeacherLineAreaChart 
                            title='邀请教师统计'
                            subtitle=''
                            dataSource={optInviteTeacherData.data} />
                        }
                        {currentOptionID == ACTIONS.TypeOption.Telephhone &&
                        <ActivityTelephoneLineAreaChart 
                            title='手机号'
                            subtitle=''
                            dataSource={optTelephoneData.data} />
                        }
                        {currentOptionID == ACTIONS.TypeOption.InviteCode &&
                        <ActivityInviteCodeLineAreaChart 
                            title='邀请码'
                            subtitle=''
                            dataSource={optInviteCodeData.data}/>
                        }
                    </div>
                </ChartGroup>
            </div>
        );
    }
}

export default connect(
    mapStateToProps,
    // Implement map dispatch to props
)(Invite)
